import { Button, Card, Form, Input, message } from "antd";
import React, { useEffect } from "react";
import styles from "./index.module.less";
import { useNavigate, useParams } from "react-router-dom";
import {
  type addHospitalDetaIlType,
  reqAddHospital,
  reqHosDetailById,
} from "@/api/hospitalSet";
export default function HosPitalAddOrUpdate() {
  const [form] = Form.useForm();
  const [messageApi, contetHolder] = message.useMessage();
  /* 结构id */
  const { id } = useParams();
  console.log(id, "12111111");

  const navigate = useNavigate();

  //表单提交判断
  const formFinish = async (values: addHospitalDetaIlType) => {
    //通过id判断 是新增还是修改
    if (id) {
      await reqAddHospital({ ...values, id: +id });

      messageApi.open({
        //请求参数
        type: "success",
        content: "添加医院成功",
      });
      navigate("/syt/hospital/hospitalset");
    } else {
      await reqAddHospital(values);

      messageApi.open({
        //请求参数
        type: "success",
        content: "添加医院成功",
      });
      navigate("/syt/hospital/hospitalset");
    }
  };

  useEffect(() => {
    const getHosDetailById = async () => {
      if (!id) return;
      const result = await reqHosDetailById(+id);
      form.setFieldsValue(result);
    };
    getHosDetailById();
  }, []);

  return (
    <Card>
      {contetHolder} {/* 请求完成后显示 messageApi.open内content内容 */}
      <Form
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 20 }}
        onFinish={formFinish}
        form={form}
      >
        {/* 栅格布局 将页面小块化划分分配 */}
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: "请必须填写" }]}
        >
          {/* form填写配置项 required 是否必填 message：提示信息  */}
          {/* label 输入框前面的内容 */}
          <Input />
        </Form.Item>
        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: "请必须填写" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: "请必须填写" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: "请必须填写" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            { required: true, message: "请必须填写" },
            {
              pattern: /^[0-9]{11}$/g,
              message: "手机号必须是11位" /* 正则匹配 限制输入 */,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            className={styles.mr}
            style={{ marginLeft: "100px" }}
            htmlType="submit"
          >
            {id ? "修改" : "提交"}
          </Button>
          <Button
            onClick={() => {
              navigate("/syt/hospital/hospitalset");
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
